<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行者创作平台-观测枢-原神wiki</title>
    <link data-n-head="ssr" rel="icon" type="image/x-icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="../清除默认格式/reset.css">
    <!-- 引入轮播插件 -->
    <link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
    <!-- 引入轮播插件js -->
    <script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./font_3530816_pb2g1owv2yc/iconfont.css">
    <link rel="stylesheet" href="./css/background+header.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body style="background-color: #EFF0F4;color: #333;">
    <div class="container">
        <!-- 背景图部分 -->
        <div class="background-image">
            <div class="logo-wrap">
                <img src="./img/原神logo.png" alt="">
            </div>
        </div>
        <!-- 顶部导航栏 -->
        <header class="clearfix" id="header">
            <div class="header-content">
                <div class="mhy-logo">
                    <a href="#">
                        <img src="./img/米哈游logo.png" alt="">
                    </a>
                </div>
                <a href="" class="mhy-title">米游社·原神</a>
                <ul class="nav">
                    <li><a href="../观测·攻略/攻略.html">观测·攻略</a></li>
                    <li><a href="../观测·Wiki/Wiki.html">观测·Wiki</a></li>
                </ul>
                <div class="header-right">
                    <form action="" class="header-search">
                        <input type="text" placeholder="搜索观测枢">
                        <i class="iconfont icon-sousuo"></i>
                    </form>
                    <div class="header-user">
                        <div class="user-wrap">
                            <img src="./img/user.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- 主体内容部分 -->
        <main>
            <div class="content-wrap">
                <div class="main-right">
                    <div class="announcement-wrap">
                        <div class="announcement">
                            <div class="announcement-title">
                                公告栏
                            </div>
                            <div class="announcement-content">
                                <p>原神观测枢是集攻略、资料库、试玩、同人为一体的玩家内容创作平台。目前观测枢wiki与攻略精选已上线。（Wiki站正在改版升级功能，如给旅行者带来不便请谅解）</p>
                                <p><strong>站内所有攻略、词条均由旅行者编写，</strong>欢迎旅行者们加入原神wiki交流群②：（1072475442）一起参与wiki和攻略相关的交流和讨论。微信搜索公众号<strong>【原神观测枢】</strong>，更多精彩内容等着你哦~
                                </p>
                                <p>原神wiki交流群①：708510208（已满）</p>
                                <p>原神wiki交流群②：1072475442（即将满员）</p>
                                <p>原神wiki交流群③：869896382（即将满员）</p>
                                <p>原神观测枢交流群：796696074（已满）</p>
                                <p>原神观测枢交流②群：491621300（已满）</p>
                                <p>原神观测枢交流③群：795360057（已满）</p>
                            </div>
                        </div>
                    </div>
                    <div class="read-more-btn">
                        更多内容
                    </div>
                    <div class="right-module-wrap">
                        <div class="icon-title">
                            <h3>
                                <img src="./img/hot推荐.png" alt="">
                                <span>热门推荐</span>
                            </h3>
                        </div>
                        <div class="hot-content">
                            <ul class="clearfix">
                                <li><a href="">层岩地图</a></li>
                                <li><a href="">可莉攻略</a></li>
                                <li><a href="">万叶养成</a></li>
                                <li><a href="">2.8攻略合集</a></li>
                                <li><a href="">平藏材料采集</a></li>
                                <li><a href="">谷中幽兰攻略</a></li>
                                <li><a href="">远海诗夏游记</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right-module-wrap">
                        <div class="icon-title">
                            <h3>
                                <span>最新内容</span>
                            </h3>
                            <div class="more-right">
                                <a href=""><span>更多内容</span></a>
                            </div>
                        </div>
                        <div class="new-content">
                            <ul>
                                <li>
                                    <a href="">
                                        <div class="new-img" style="background-image: url(./img/latest1.png);"></div>
                                        <div class="right-introduction">
                                            <h5>【残像暗战】活动攻略 DAY1 猛攻式审判</h5>
                                            <p></p>
                                            <div class="detail">
                                                <img src="./img/author1.png" alt="">
                                                <p class="author">摸鱼划水夏日日</p>
                                                <p class="time">1小时前</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="new-img" style="background-image: url(./img/latest2.png);"></div>
                                        <div class="right-introduction">
                                            <h5>【残像暗战】第一天任务攻略</h5>
                                            <p></p>
                                            <div class="detail">
                                                <img src="./img/author2.png" alt="">
                                                <p class="author">老兵菜鸟</p>
                                                <p class="time">4小时前</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="new-img" style="background-image: url(./img/latest3.png);"></div>
                                        <div class="right-introduction">
                                            <h5>正因其徒劳</h5>
                                            <p></p>
                                            <div class="detail">
                                                <img src="./img/author3.png" alt="">
                                                <p class="author">猫冬</p>
                                                <p class="time">07-19 19:16</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="new-img" style="background-image: url(./img/latest4.png) ;"></div>
                                        <div class="right-introduction">
                                            <h5>正因其徒劳</h5>
                                            <p></p>
                                            <div class="detail">
                                                <img src="./img/author3.png" alt="">
                                                <p class="author">猫冬</p>
                                                <p class="time">07-19 18:26</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="back-top" onclick="topFunction()">
                        <img src="./img/回到顶部.png" alt="">
                        返回顶部
                    </div>
                </div>
                <div class="main-content">
                    <!-- 轮播图 -->
                    <div class="swiper">
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner1.jpg" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner2.jpg" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner3.png" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner4.png" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner5.png" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner6.png" alt="">
                                </a>
                            </li>
                            <li class="swiper-slide">
                                <a href="">
                                    <img src="./img/banner7.png" alt="">
                                </a>
                            </li>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>
                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev prev"></div>
                            <div class="swiper-button-next next"></div>
                        </ul>
                    </div>
                    <script>
                        var mySwiper = new Swiper(".swiper", {
                            effect: 'fade',
                            autoplay: true, //设置自动循环播放
                            loop: true, // 循环模式选项
                            // 如果需要分页器
                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true, //配置点击切换效果
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: ".swiper-button-next",
                                prevEl: ".swiper-button-prev",
                            },
                        });
                    </script>
                    <!-- 快捷导航 -->
                    <div class="shortcuts-wrap">
                        <div class="shortcuts">
                            <div class="icon-title">
                                <h3>
                                    <img src="./img/icon快捷导航.png" alt="">
                                    <span>快捷导航</span>
                                </h3>
                            </div>
                            <div class="shortcuts-content">
                                <ul>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/地图工具1.png" alt="">
                                                <img src="./img/地图工具2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/wiki站1.png" alt="">
                                                <img src="./img/wiki站2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/2.8版本1.png" alt="">
                                                <img src="./img/2.8版本2.png" alt="">
                                            </div>
                                            <div class="red-point">
                                                <img src="./img/hot.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/角色攻略1.png" alt="">
                                                <img src="./img/角色攻略2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/装备解析1.png" alt="">
                                                <img src="./img/装备解析2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/讨伐boss1.png" alt="">
                                                <img src="./img/讨伐boss2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/任务手册1.png" alt="">
                                                <img src="./img/任务手册2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/深境螺旋1.png" alt="">
                                                <img src="./img/深境螺旋2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/活动集锦1.png" alt="">
                                                <img src="./img/活动集锦2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/家园系统1.png" alt="">
                                                <img src="./img/家园系统2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/新手合集1.png" alt="">
                                                <img src="./img/新手合集2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/元素攻略1.png" alt="">
                                                <img src="./img/元素攻略2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/料理大全1.png" alt="">
                                                <img src="./img/料理大全2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="">
                                            <div class="img-wrap">
                                                <img src="./img/阵容攻略1.png" alt="">
                                                <img src="./img/阵容攻略2.png" alt="">
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 玩法探索 -->
                    <div class="play-wrap">
                        <div class="play">
                            <div class="icon-title">
                                <h3>
                                    <img src="./img/玩法探索.png" alt="">
                                    <span>玩法探索</span>
                                </h3>
                                <div class="more-right">
                                    <a href=""><span>更多内容</span></a>
                                </div>
                            </div>

                            <ul class="play-content">
                                <li>
                                    <div class="background-img" style="background-image:url(./img/角色攻略.png)"></div>
                                    <div class="activity-introduction">
                                        <h4>
                                            <div class="introduction-title">
                                                角色攻略
                                            </div>
                                        </h4>
                                        <ol>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>可莉</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>枫原万叶</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>鹿野院平藏</div>
                                                    </h5>
                                                </a>
                                            </li>
                                        </ol>
                                    </div>
                                </li>
                                <li>
                                    <div class="background-img" style="background-image:url(./img/活动集锦.png)"></div>
                                    <div class="activity-introduction">
                                        <h4>
                                            <div class="introduction-title">
                                                活动集锦
                                            </div>
                                        </h4>
                                        <ol>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>远海诗夏游记</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>炉心机造</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>深泥奇谭</div>
                                                    </h5>
                                                </a>
                                            </li>
                                        </ol>
                                    </div>
                                </li>
                                <li>
                                    <div class="background-img" style="background-image:url(./img/任务手册.png)"></div>
                                    <div class="activity-introduction">
                                        <h4>
                                            <div class="introduction-title">
                                                任务手册
                                            </div>
                                        </h4>
                                        <ol>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>任务大全</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>层岩专题</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>海岛专题</div>
                                                    </h5>
                                                </a>
                                            </li>
                                        </ol>
                                    </div>
                                </li>
                                <li>
                                    <div class="background-img" style="background-image:url(./img/讨伐boss.jpg)"></div>
                                    <div class="activity-introduction">
                                        <h4>
                                            <div class="introduction-title">
                                                讨伐BOSS
                                            </div>
                                        </h4>
                                        <ol>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>遗迹巨蛇</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>祸津御建鸣神命</div>
                                                    </h5>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="">
                                                    <h5>
                                                        <div>冰霜与共</div>
                                                    </h5>
                                                </a>
                                            </li>
                                        </ol>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <ul class="clearfix">
                <li><a href="#">申请观测枢编辑</a></li>
                <li><a href="#">关于观测枢</a></li>
            </ul>
        </footer>
        <div class="login-background">
            <div class="login-wrap">
                <div class="move"></div>
                <img src="./img/米哈游logo.png" alt="" class="login-mhy-logo">
                <img src="./img/fork.png" alt="" class="fork">
                <div class="title">
                    <div class="tab-item active"><span>验证码登录</span></div>
                    <div class="tab-item "><span>密码登录</span></div>
                </div>
                <div class="form">
                    <div class="input-wrap">
                        <div class="input-container">
                            <input type="tel" placeholder="手机号注册/登录">
                        </div>
                    </div>
                    <div class="input-wrap">
                        <div class="input-container">
                            <input type="tel" placeholder="验证码">
                            <div class="auth-code-btn">
                                获取验证码
                            </div>
                        </div>
                    </div>
                    <div class="buttom-wrap">
                        <button class="login-btn" type="submit">登录</button>
                    </div>
                </div>
                <div class="Registration">
                    <a href="#">登录遇到问题？</a>
                    <a href="#" class="to-right">立即注册</a>
                </div>
                <p class="login-tip">
                    <span>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</span>
                    <a href="">《米哈游通行证用户服务协议》</a>
                    <a href="">《米哈游通行证用户个人信息及隐私保护政策》</a>
                </p>
            </div>
        </div>
    </div>
    <script src="./js/攻略.js/top.nav.js"></script>
    <script src="./js/攻略.js/backtop.js"></script>
    <script src="./js/攻略.js/login.js"></script>
</body>

</html>